import { defineComponent, onBeforeMount, Transition, type VNode } from "vue";
import { RouterView } from "vue-router";
import RootLayout from "@/layouts/RootLayout";
import useAuthStore from "@/store/auth";

const App = defineComponent({
  setup() {
    const auth = useAuthStore();

    onBeforeMount(() => {
      auth.load();
    });

    return () => (
      <RootLayout>
        <RouterView>
          {{
            default: ({ Component }: { Component?: () => VNode }) => {
              return (
                <Transition
                  name="xyzwps-router-fade"
                  enterActiveClass="transition-opacity duration-200 ease-in-out"
                  leaveActiveClass="transition-opacity duration-200 ease-in-out"
                  enterFromClass="opacity-0"
                  leaveToClass="opacity-0"
                  mode="out-in"
                >
                  {Component && <Component />}
                </Transition>
              );
            },
          }}
        </RouterView>
      </RootLayout>
    );
  },
});

export default App;
